<div class="page page-dashboard">

    <div class="row" data-ng-controller="FlotChartCtrl">
        <div class="col-md-12">
            <div class="panel panel-default panel-minimal">
                <div class="divider divider-md"></div>
                <div class="panel-heading">Traffic</div>
                <div class="divider divider-md"></div>
                <div class="panel-body">
                    <div data-flot-chart 
                         data-data="combo3.data"
                         data-options="combo3.options"
                         style="height:350px"
                    ></div>

                    <div class="divider divider-xl"></div>
                    <div class="row" data-ng-controller="SparklineCtrl">
                        <div class="col-md-3 box-stats">
                            <span class="box-desc">Views</span>
                            <p class="box-num">4,268</span></p>
                            <div data-sparkline
                                 data-data="infoChart1.data"
                                 data-options="infoChart1.options"
                            ></div>            
                        </div>
                        <div class="col-md-3 box-stats">
                            <span class="box-desc">Clickthroughs</span>
                            <p class="box-num">3,239</span></p>
                            <div data-sparkline
                                 data-data="infoChart2.data"
                                 data-options="infoChart2.options"
                            ></div>                              
                        </div>
                        <div class="col-md-3 box-stats">
                            <span class="box-desc">Vistors</span>
                            <p class="box-num">2,922</span></p>
                            <div data-sparkline
                                 data-data="infoChart3.data"
                                 data-options="infoChart3.options"
                            ></div>                              
                        </div>
                        <div class="col-md-3 box-stats no-border">
                            <span class="box-desc">Users</span>
                            <p class="box-num">1,093</span></p>
                            <div data-sparkline
                                 data-data="infoChart4.data"
                                 data-options="infoChart4.options"
                            ></div>                              
                        </div>
                    </div>
                    <div class="divider divider-xl"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="row" data-ng-controller="FlotChartCtrl">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body padding-lg">
                    <div class="row">
                        <div class="col-lg-8" data-ng-controller="EasyPieChartCtrl">
                            <div class="panel">
                                <div class="panel-heading text-center">Engagement</div>
                                <div class="divider divider-lg"></div>
                                <div class="panel-body">
                                    <div class="row text-center metrics">
                                        <div class="col-xs-6 col-md-3">
                                            <span class="metric">5.6M</span>
                                            <span class="metric-info">Session</span>
                                        </div>
                                        <div class="col-xs-6 col-md-3">
                                            <span class="metric">4.8M</span>
                                            <span class="metric-info">Users</span>
                                        </div>                                
                                        <div class="col-xs-6 col-md-3">
                                            <span class="metric">5:06</span>
                                            <span class="metric-info">Session Duration</span>
                                        </div>
                                        <div class="col-xs-6 col-md-3">
                                            <span class="metric">6.24</span>
                                            <span class="metric-info">Page Views</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 text-center">
                                            <div easypiechart options="easypiechartsm1.options" percent="easypiechartsm1.percent" class="easypiechart easypiechart-sm">
                                            <span class="pie-percent" ng-bind="easypiechartsm1.percent"></span>
                                            </div>
                                            <p class="text-center text-muted">Bounce Rate</p>
                                        </div>
                                        <div class="col-md-3 text-center">
                                            <div easypiechart options="easypiechartsm2.options" percent="easypiechartsm2.percent" class="easypiechart easypiechart-sm">
                                            <span class="pie-percent" ng-bind="easypiechartsm2.percent"></span>
                                            </div>
                                            <p class="text-center text-muted">Active Rate</p>                                    
                                        </div>
                                        <div class="col-md-3 text-center">
                                            <div easypiechart options="easypiechartsm1.options" percent="easypiechartsm1.percent" class="easypiechart easypiechart-sm">
                                            <span class="pie-percent" ng-bind="easypiechartsm1.percent"></span>
                                            </div>
                                            <p class="text-center text-muted">Retention Rate</p>
                                        </div>
                                        <div class="col-md-3 text-center">
                                            <div easypiechart options="easypiechartsm3.options" percent="easypiechartsm3.percent" class="easypiechart easypiechart-sm">
                                            <span class="pie-percent" ng-bind="easypiechartsm3.percent"></span>
                                            </div>
                                            <p class="text-center text-muted">Referral Rate</p>
                                        </div>                        
                                    </div>
                                </div>
                            </div>                            
                        </div>
                        <div class="col-lg-4">
                            <section class="panel">
                                <div class="panel-heading">Statistics</div>
                                <div class="divider divider-md"></div>
                                <div class="panel-body">
                                    <div class="divider divider-md"></div>
                                    <div class="progressbar-container">
                                        <uib-progressbar class="progressbar-xs" value="34" type="success"></uib-progressbar>
                                        <p class="desc">Bounce Rate <span class="pull-right color-success">34%</span></p>
                                    </div>
                                    <div class="progressbar-container">
                                        <uib-progressbar class="progressbar-xs" value="68" type="info"></uib-progressbar>
                                        <p class="desc">New Visists <span class="pull-right color-info">68%</span></p>
                                    </div>
                                    <div class="progressbar-container">
                                        <uib-progressbar class="progressbar-xs" value="48" type="danger"></uib-progressbar>
                                        <p class="desc">Search Traffic <span class="pull-right color-danger">48%</span></p>
                                    </div>
                                    <div class="progressbar-container">
                                        <uib-progressbar class="progressbar-xs" value="77" type="warning"></uib-progressbar>
                                        <p class="desc">Modern Browsers <span class="pull-right color-warning">77%</span></p>
                                    </div>
                                    <div class="progressbar-container">
                                        <uib-progressbar class="progressbar-xs" value="55" type="primary"></uib-progressbar>
                                        <p class="desc">Returning <span class="pull-right color-primary">55%</span></p>
                                    </div>                                      
                                </div>
                            </section>
                        </div>        
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
       <!-- Stats -->
        <div class="col-lg-3 col-xsm-6">
            <div class="panel panel-box">
                <div class="panel-top">
                    <span class="zmdi zmdi-local-airport color-success"></span>
                </div>
                <div class="panel-info">
                    <span data-translate="GROWTH"></span>
                </div>
                <div class="panel-bottom bg-light">
                    <span>36 <span class="size-h4">%</span></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xsm-6">
            <div class="panel panel-box">
                <div class="panel-top">
                    <i class="zmdi zmdi-accounts color-info"></i>
                </div>
                <div class="panel-info">
                    <span data-translate="NEW_USERS"></span>
                </div>
                <div class="panel-bottom bg-light">
                    <span>22 <span class="size-h4">%</span></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xsm-6">
            <div class="panel panel-box">
                <div class="panel-top">
                    <i class="zmdi zmdi-money color-warning"></i>
                </div>
                <div class="panel-info">
                    <span data-translate="PROFIT"></span>
                </div>
                <div class="panel-bottom bg-light">
                    <span>37 <span class="size-h4">k</span></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xsm-6">
            <div class="panel panel-box">
                <div class="panel-top">
                    <i class="zmdi zmdi-shopping-cart color-danger"></i>
                </div>
                <div class="panel-info">
                    <span data-translate="SALES"></span>
                </div>
                <div class="panel-bottom bg-light">
                    <span>21 <span class="size-h4">k</span></span>
                </div>
            </div>
        </div>
        <!-- end stats -->          
    </div>

</div>
    